<template>
  <div class="box">
    <div class="top">
      <!-- 顶部左侧盒子 -->
      <div class="topl">
        <search></search>
        <!-- 折线图组件 -->
        <echartLine></echartLine>
      </div>
      <!-- 顶部右侧盒子 -->

      <echartPie></echartPie>
    </div>
    <div class="bottom">
      <!-- 底部左侧盒子 -->
      <div class="bottoml">
        <echartsLine></echartsLine>

        <echartBar></echartBar>
      </div>
      <!-- 底部右侧盒子 -->

      <echartsPie></echartsPie>
    </div>
  </div>
</template>

<script>
import echartLine from '@/components/line.vue'
import echartPie from '@/components/pie.vue'
import echartsPie from '@/components/pie2.vue'
import echartBar from '@/components/bar.vue'
import echartsLine from '@/components/line2.vue'
import search from '@/components/search.vue'
export default {
  data () {
    return {
      fullWeight: document.documentElement.clientWidth
    }
  },
  components: {
    // 折线图
    echartLine,
    echartsLine,
    // 饼图
    echartPie,
    echartsPie,
    // 柱状图
    echartBar,
    search
  },
  mounted () {
    window.onresize = () => {
      return (() => {
        this.fullWeight = document.documentElement.clientWidth
      })()
    }
  },
  watch: {
    fullWeight () {
      console.log(this.fullWeight)
      const html = document.querySelector('html')
      const aa = (html.style.fontsize = this.fullWeight / 10 + 'px')
      console.log(aa)
    }
  }
}
</script>

<style lang="less">
// html{
//   font-size: 50px;
// }
//

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #000;

  .top,
  .bottom {
    display: flex;
  }

  .topl,
  .bottoml {
    display: flex;
    flex: 7;
    align-items: center;
    justify-content: space-around;
    width: 1400px;
    height: 400px;
    margin-bottom: 30px;
    // background-color: pink;
  }
  .bottoml {
    display: flex;
    justify-content: space-around;
  }
}
</style>
